<template>
	<view>
		<uni-popup ref="pay" type="bottom">
			<view
				style="width: 100vw;background-color: #FFFFFF;border-radius: 20rpx 20rpx 0 0;padding:0 40rpx;overflow: hidden;">
				<view class="fs-40 color-333333 center" style="margin-top: 50rpx;margin-bottom: 40rpx;">选择支付方式</view>
				<view class="flex flex-x-y fs-40 color-all mt-20">
					<view class="numberfont">¥{{price}}</view>
				</view>
				<view style="padding: 40rpx 0 40rpx 0rpx;">
					<view @tap="choose_pay(index)" v-for="(item,index) in pay_arr" :key="index"
						class="flex flex-y-center" style="height: 90rpx;">

						<qq-image mode="" :url="item.logo" imageStyle="width: 44rpx;height: 44rpx;"></qq-image>

						<view class="pl-24 fs-28 color-333333">{{item.name}}</view>
						<view class="flex-1 flex flex-x-end fs-40">
							<view v-if="!item.checked" style="width: 36rpx;height: 36rpx;"
								class="iconfont icon-weixuanzhong"></view>
							<view v-else style="width: 36rpx;height: 36rpx;" class="iconfont icon-xuanzhong color-all">
							</view>
						</view>
					</view>
				</view>
				<view class="pay-btn-sure bg-blue bg-all" @tap.stop="to_pay">确定</view>
				<view :style="{height:safeArea}" class="mt-20"></view>
			</view>

		</uni-popup>
		<toast ref="toast"></toast>

		<pay @success="success_pw" ref="topay" bottom="100rpx"></pay>
	</view>
</template>

<script>
	export default {
		name: "paylist",
		props: {


		},
		data() {

			return {
				safeArea: getApp().globalData.safeArea + 'px',
				pay_arr: [
					// 	{
					// 	id: 1,
					// 	isUse: true,
					// 	logo: "https://fgxfile.oss-cn-hangzhou.aliyuncs.com/filedir/1681117536476.png?Expires=1996477529&OSSAccessKeyId=LTAI5tR12EubGc1x6FkuhJdM&Signature=6FebJ2iQlVGL3u6miRSBqiAqhdU%3D",
					// 	name: "支付宝",
					// 	param: null,
					// 	payId: 0,
					// 	remark: "1",
					// },
				],
				price: '',
			};
		},
		created() {
			console.log('this.CONFIG.APP_PAY_TYPE', this.CONFIG.APP_PAY_TYPE);
			// if (this.CONFIG.APP_PAY_TYPE == 1) {
			// 	//支付宝支付
			// 	this.pay_arr = [{
			// 		name: '支付宝支付',
			// 		image: '../../static/images/pay1.png',
			// 		checked: true,
			// 		id: 0
			// 	}];
			// } else {
			// 	//聚合支付
			// 	this.pay_arr = [{
			// 			name: '支付宝支付',
			// 			image: '../../static/images/pay1.png',
			// 			checked: true,
			// 			id: 2
			// 		},
			// 		{
			// 			name: '微信支付',
			// 			image: '../../static/images/pay2.png',
			// 			checked: false,
			// 			id: 1
			// 		}
			// 	];
			// }
			this.request({
				url: '/pay/getPayTypeList',
			}).then(res => {
				if (res.status != 200) return;
				if (res.data.length > 0) {
					res.data.forEach(val => {
						val.id = val.payId;
					});
					let arr = res.data;
                    console.log('支付方式列表', arr);
					// HIDDEN_PAY_H5 HIDDEN_PAY_ANDROID HIDDEN_PAY_IOS

					let HiddenArrKey = "HIDDEN_PAY_H5";

					// #ifdef APP-PLUS
					if (uni.getSystemInfoSync().platform == 'ios') {
						HiddenArrKey = "HIDDEN_PAY_IOS";
					} else {
						HiddenArrKey = "HIDDEN_PAY_ANDROID";
					}
					// #endif

					if (this.CONFIG[HiddenArrKey]) {
						let hiddenArr = String(this.CONFIG[HiddenArrKey]).trim().split(',');
						arr = arr.filter(v => {
							return !hiddenArr.includes(v.type);
						});
					}
					if (arr.length > 0) {
						arr[0].checked = true;
					}
					this.pay_arr = arr;
					
					// arr.map((item, index) => {
					// 	if (item.type =='ALI_PAY_H5') {
					// 		const arrresult = [
					// 			arr.find(item => item.type === "ALI_PAY_APP") || arr.find(item =>
					// 				item.type === "ALI_PAY_H5")
					// 		];
					// 		console.log('执行了arrresult', arrresult);
					// 		this.pay_arr = arrresult;
					// 	} else {
					// 		console.log('执行了iOS', arr);
					// 		this.pay_arr = arr;
					// 	}
					// });
				}
			});
		},
		methods: {
			open(obj = {}) {

				this.price = obj.price || '';
				this.obj = obj;
				if (obj.price !== undefined && Number(obj.price) == 0) {
					this.to_pay();
					return;
				}
				this.$refs.pay.open();
			},
			close() {
				this.$refs.pay.close();
			},
			choose_pay(index) {
				this.pay_arr.forEach((val, ind) => {
					if (index == ind) {
						val.checked = true;
					} else {
						val.checked = false;
					}
				});
				this.pay_arr = this.clone(this.pay_arr);
			},
			to_pay() {
				if (this.pay_arr.filter(val => val.checked)[0]) {

					let pay_id = this.pay_arr.filter(val => val.checked)[0].payThoroughfareId;
				}

				this.to_pay_after();
			},
			success_pw(pw) {
				this.to_pay_after(pw);
			},
			to_pay_after(pw = '') {
				//////
				let pay_id = this.pay_arr.filter(val => val.checked)[0] || {};

				this.close();
				this.obj.success & this.obj.success(pay_id.payThoroughfareId, Number(this.price), pay_id);

				////
			},
		},

	}
</script>

<style lang="scss">
	.pay-btn-sure {
		margin: 20rpx auto 40rpx auto;
		width: 500rpx;
		height: 88rpx;
		border-radius: 44rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 34rpx;
	}
</style>